<template>
  <div style="flex-direction: column;display: flex;justify-content: center; align-items: center;">
    <div style="display: flex; justify-content: start; flex-direction: column;width: 100%; margin-left: 29%;">
      <div style="display: flex; align-items: center;justify-content: flex-start; margin-top: 10px;">
          <p><span style="color: red;">*</span><span>新的文章名：</span></p>
          <a-input v-model:value="articleDatas.title" placeholder="请输入文章名" style="width: 18.5vw;"/>
      </div>
      <div style="display: flex; align-items: center;justify-content: flex-start; ">
          <p><span style="color: red;">*</span><span>文章的标签：</span></p>
          <a-tree-select
            v-model:value="articleDatas.tags"
            style="width: 18.8%"
            :tree-data="tagsName"
            allow-clear
            placeholder="请选择文章标题"
            tree-node-filter-prop="label"
            multiple
          />
      </div>
    </div>
    <div style="width: 70%;">
      <v-md-editor
        v-model="contentRef"
        height="400px"
        :disabled-menus="[]"
        style="width: 800px"
      />
    </div>
    <div style="width: 100%;">
      <div style="display: flex; align-items: center; justify-content: end; width: 85.2%;">
        <a-button type="primary" style="margin-Top: 30px;border-radius: 0%;" @click="createArticle">提交</a-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref, toRaw, watch } from 'vue'
  import VMdEditor from '@kangc/v-md-editor'
  import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'
  import Prism from 'prismjs'
  import {message} from 'ant-design-vue'
  import '@kangc/v-md-editor/lib/style/base-editor.css'
  import '@kangc/v-md-editor/lib/theme/style/github.css'
  import type { articleData } from '@/modules/users'
  import { useLoginStore } from '@/store/login'
  import { useAdministorStore } from '@/store/administor'

  const loginStore=useLoginStore()
  const administorStore = useAdministorStore()
  const tagsName = ref<any[]>([])
  

  VMdEditor.use(githubTheme, { Prism })
  const props = defineProps<{
    modelValue: string
  }>()

  const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void
  }>()

  const contentRef = ref(props.modelValue)
  const articleDatas = ref<articleData>({
    title: '',
    content: '',
    userId:parseInt(loginStore.accountId),
    tags: [],
  })

  const getTagsData = async () => {
        const response = await administorStore.getTagList();
        return response.data.data;
  };

  const transformToTreeData = (dataArray: any[]) => {
    return dataArray.map(item => ({
        title: item.name,
        value: item.id,
        key: item.id, 
    }));
  };

  const createArticle = async () => {
    if(loginStore.isLogin===false){
      message.warn('请先登录')
      return
    }
    if (articleDatas.value.title === '') {
      message.warn('请输入文章名')
      return
    }
    if (articleDatas.value.tags.length === 0) {
      message.warn('请选择文章标签')
      return
    }
    if (contentRef.value === '') {
      message.warn('请输入文章内容')
      return
    }
    articleDatas.value.content = contentRef.value
    const response=await loginStore.createArticle(articleDatas.value)
    if (response.data.code === 0) {
      message.success('文章上传成功')
      contentRef.value = ''
      articleDatas.value.title = ''
      articleDatas.value.tags = []
    }
  }

  onMounted(
    async () => {
      const transData=await getTagsData()
      tagsName.value = transformToTreeData(transData)
    }
  )

  watch(
    () => props.modelValue,
    (newVal) => {
      if (newVal !== contentRef.value) {
        contentRef.value = newVal
      }
    }
  )

  watch(contentRef, (val) => {
    emit('update:modelValue', val)
  })
</script>

<style scoped>
</style>
